<html>
<head> 
 <link rel="stylesheet" type="text/css" href="jsxgraph.css" /> 
 <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> 
 <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 <script type="text/javascript">
function initialize() {
	var xmlhttp = createXMLHttpRequest();
	
	function createXMLHttpRequest() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		} 
		else if (window.ActiveXObject) {
			try {
				return new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch (e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP");
				} 
				catch (e2) {
					return null;
				}
			}
  		} 
  		else {
			return null;
 		 }
	}

	document.download = function download(key, points) {
		//document.write("download is called");
		var request = createXMLHttpRequest();
		var url = "http://restmiyake.appspot.com/resources/";
		request.open("GET", url + "tracelist", false);
		request.send("");
		
		var keys = JSON.parse(request.responseText);
		
		var table = document.getElementById("chartTable");
		for (i = table.rows.length-1; i >= 0; i--) {
			table.deleteRow(i);
		}
		
		var row;
		for (i = 0;i < keys.list.length;i++) { 
			if (i%2 == 0) {
				row = table.insertRow(-1);
			}
			var key;
			key = keys.list[i];
			var ele = document.createElement("div");
			ele.id = key;
			ele.class = "jxgbox";
			ele.style.width = "200px";
			ele.style.height = "100px";
			ele.innerHTML = key;//"loading...";
			//document.body.appendChild(ele);
				
			var td = row.insertCell(-1);
			td.appendChild(ele);
			var request2 = createXMLHttpRequest();
			request2.open("GET", url + "trace?key=" + key + "&points=" + points, true);
			request2.send("");
			
			request2.onreadystatechange = onreadystatechange(request2, points);
		}
				
		function onreadystatechange(request2, points) {
			return function() {
				if (request2.readyState == 4 && request2.status == 200) {
					var data = JSON.parse(request2.responseText);
					document.getElementById(data.key).innerHTML = "";
					var brd = JXG.JSXGraph.initBoard(data.key, {boundingbox:[-1,6,points,-70], axis: true}); 
					document.drawCurve(data.y, data.horizontalMin, data.horizontalMax, brd);
				}
			}
		}
	}
	
	document.drawCurve = function drawCurve(data, min, max, brd) {	
		var i;
		var x = [];   
		var y = []; 
		
		for (i=0;i<=data.length;i++) {  
			// Generate random coordinates     
			x.push(i);     
			y.push(data[i]);   
		}	
		// Curve:   
		brd.createElement('curve', [x,y],                  
			{strokeWidth:1, strokeColor:'#0077cc',                   
			highlightStrokeColor:'#0077cc'}               
		); 
	}
	
	document.download("", 200);
}
</script>

</head>
<body onload="initialize()">
	<input type="button" value="reload" onClick="document.download('a', 500)">
	<table id="chartTable">
	</table>
</body>
</html>